// publisher页面 - 文章标题
const form = layui.form;
form.verify({
    articleTitle: [
        /^[\u4E00-\u9FA5a-zA-Z0-9_-]+$/,
        "标题只能是中英文, 数字下划线中划线组成"
    ],
    // 分类判断
    cate: function () {
        return $("select[name=cate_id]").val().length == 0 && "请选择文章类别"
    }
})


//1.获取文章分类
const baseUrl = 'http://api-breakingnews-web.itheima.net'
let token = localStorage.getItem('token')
axios.get(`${baseUrl}/my/article/cates`, {
    headers: {
        Authorization: token
    }
}).then((res) => {
    const { data, status } = res.data
    if (status === 0) {
        data.forEach(obj => {
            const theOp = ` <option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`
            $('select[name="cate_id"]').append(theOp)
        });
        form.render('select', 'edit')
    }
})

//2.富文本编辑器
initEditor()
// 3. 集成图片裁剪的插件初始化
let cropper;
function initCropper() {
    // 1. 集成裁剪插件
    const image = document.getElementById('image'); // 获取到要被添加裁剪插件的图片
    cropper = new Cropper(image, {
        aspectRatio: 1, // 横纵比例
        preview: $(".img-preview")
    });
}
initCropper();
//4.上传图片  实现图片的预览
$('.select').on('click', () => {
    console.log('111');
    //4.2触发input文件的click事件
    $('input[type=file]').click()
    //4.3给input注册change事件
    $('input[type="file"]').on('change', (e) => {
        //4.4获取文件
        const file = e.target.files[0]
        //4.5调用window上URL的方法转换成可预览的blob地址
        const url = URL.createObjectURL(file)//blob对象  可预览的地址
        // 4.6让cropper重新设置图片url地址以及重新构建cropper
        cropper.replace(url);
    })
})
//5.搜集数据  转换成 Format 数据格式   向后台请求数据
//5.1点击发表是搜集数据
/**
 * post
 * FormData 数据格式
 * title	是	string	文章标题
 * cate_id	是	int	所属分类 Id
 * content	是	string	文章内容
 * cover_img	是	blob二进制	文章封面
 * state	是	string	状态，可选值为：已发布、草稿

 */
$('form').on('submit', (e) => {
    e.preventDefault()
    //// 后台要的是FormData数据类型(内容载体)
    let fd = new FormData($('form')[0])
    //遍历打印  
    // fd.forEach((v,k)=>{
    //     console.log(v,k);
    // })
    // content 文章内容 有键content 无值 
    //获取富文本内容
    // 富文本里的东西取出(唯一的用activeEditor)
    const htmlStr = tinyMCE.activeEditor.getContent();
    //将数据设置给formdata  content
    fd.set('content', htmlStr)

    // 2.cover_img blob二进制图片获取不到
    // 2.1把封面图片的裁剪区域提取出来
    const canvas = cropper.getCroppedCanvas({
        width: 100,
        height: 100
    });
    //2.2 把canvas -> File(Blob)文件对象 (异步任务)
    canvas.toBlob(function (blobUrl) {
        console.log(blobUrl); // 最终想要的值 =>后台需要的 {type:'image/png',size:10000}
        // 3.将blobUrl添加到fd里面
        fd.append('cover_img', blobUrl)
        // fd.forEach((v, k) => {
        //     console.log(v, k);
        // })
        // 4. 发送请求
        axios.post(`${baseUrl}/my/article/add`,fd,{
            headers:{
                Authorization:token
            }
        }).then((res)=>{
            //成功后,跳转到文章列表
            layer.msg(res.data.message)
            console.log(res);
            if(res.data.status === 0){
                setTimeout(() => {
                    location.href='/iframe/article/list/list.html'
                }, 800);
            }
        })

    })
})